<template>
	<view>
		<scroll-view style="height: 100vh;" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="100" refresher-background="lightgreen" @refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort">
			<view v-for="(itme,index) in curriculumListData" :key="index" class="curriculumBoxCla" @tap="gocurriculumFun(itme)">
				<view class="bothSidesCla">
					<view>
						<image :src="itme.face_url" class="imgCla"></image>
					</view>
					<view style="margin-left: 15rpx;">
						<view class="curriculumTitleCla">{{itme.NewTitle}}</view>
						<view class="belowContentCla"> 
							<text class="moneyCla">￥{{itme.amout}}</text>
							<text class="distanceCla">{{itme.newDistance}}km</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				triggered: false,
				longitude: "",
				latitude: "",
				curriculumListData: []
			}
		},
		
		methods: {
			
			gocurriculumFun(itme) {
				uni.navigateTo({
					url: '/pages/World/classChannel/classChannel?curriculumId=' + itme.id + "&curriculumType=" + "兑换券"
				})
			},
			
			rad(d) {
				return d * Math.PI / 180.0; 
			},
			
			getDistance(lat1, lng1, lat2, lng2) {
				let me = this
				var radLat1 = me.rad(lat1);
				var radLat2 = me.rad(lat2);
				var a = radLat1 - radLat2;
				var b = me.rad(lng1) - me.rad(lng2);
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137; // EARTH_RADIUS;
				s = Math.round(s * 10000) / 10000; //输出为公里
				var distance = s;
				var distance_str = "";
				if (parseInt(distance) >= 1) {
					distance_str = distance.toFixed(1) + "km";
				} else {
					distance_str = distance * 1000 + "m";
				}
				return s;
			},
			
			threeSubjectsActivityListRequest() {
				this.$myRequest({
					url: "/masterSetPrice/queryActivityListPageByType",
					data: {
						pageSize: 10,
						currentPage: 1,
						status: 2,
						type: "experience_specials",
						latitude: this.latitude,
						longitude: this.longitude
					}
				}).then((val) => {
					val.data.forEach((itme) => {
						itme.NewTitle =  "【" + itme.course_num + "节" + "】" + itme.title
						itme.newDistance = Math.round(this.getDistance(itme.latitude,itme.longitude,this.latitude,this.longitude))
					})
					this.curriculumListData = val.data
				})
			},
		},
		
		onLoad() {
			try {
				this.longitude = uni.getStorageSync('storage_key').longitude
				this.latitude = uni.getStorageSync('storage_key').latitude
				this.threeSubjectsActivityListRequest()
			}catch(e){}
		}
	}
</script>
<style lang="scss" scoped>
	.curriculumBoxCla {
		margin-top: 25rpx;
		background: #FFFFFF;
		padding: 20rpx;
		box-sizing: border-box;
		width: 693rpx;
		margin-left: 27rpx;
		border-radius: 20rpx;
		.bothSidesCla {
			display: flex;
			.imgCla {
				width: 150rpx;
				height: 150rpx;
				border-radius: 10rpx;
				border: 1rpx solid #F5F5F5;
			}
			.curriculumTitleCla {
				font-size: 35rpx;
				font-weight: bold;
			}
			.belowContentCla {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 450rpx;
				.moneyCla {
					color: red;
					font-size: 28rpx;
					font-weight: bold;
					margin-top: 15rpx;
				}
				.distanceCla {
					color: #C1C1C1;
					font-size: 23rpx;
					position: relative;
					top: 9rpx;
				}
			}
		}
	}
</style>